<template>
    <div class="page-container">
        <div class="filter-container">
            <el-button icon="Plus" type="primary" @click="dialogVisible = true,randomNum()">新建病例</el-button>
            <span style="color:#409EFF;">预约状态：</span>
            <el-select style="width: 200px" v-model="apmstatus" placeholder="请选择">
                <el-option v-for="status in statusOptions" :key="status.value" :label="status.label"
                    :value="status.value" />
            </el-select>
            <el-input v-model="condition" placeholder="请输入会诊号或姓名" clearable style="width: 200px;" />
            <el-button icon="Search" type="primary" @click="gettabledata()">搜索</el-button>
        </div>
        <div class="table-container">
            <el-table :data="tableData.list" style="width: 100%" stripe>
                <el-table-column prop="id" label="会诊编号" />
                <el-table-column prop="ecname" label="病人姓名" />
                <el-table-column prop="specimen" label="手术部位" />
                <el-table-column prop="ecmobile" label="联系电话" />
                <el-table-column prop="expertName" label="专家" />
                <el-table-column prop="createDate" label="申请时间">
                    <template #default="{ row }">
                        {{ formatApmdate(row.createDate) }}
                    </template>
                </el-table-column>
                <el-table-column prop="apmdate" label="预约时间">
                    <template #default="{ row }">
                        {{ formatApmdate(row.apmdate) }}
                    </template>
                </el-table-column>
                <el-table-column prop="apmstatus" label="预约状态">
                    <template #default="{ row }">
                        <span v-if="row.apmstatus === 0">未预约</span>
                        <span v-else-if="row.apmstatus === 1">已预约</span>
                        <span v-else-if="row.apmstatus === 2">申请中</span>
                        <span v-else-if="row.apmstatus === 3">撤回待确认</span>
                        <span v-else-if="row.apmstatus === 4">撤回成功</span>
                        <span v-else-if="row.apmstatus === 5">预约失败</span>
                        <span v-else-if="row.apmstatus === 6">已提交</span>
                        <span v-else-if="row.apmstatus === 7">诊断中</span>
                        <span v-else-if="row.apmstatus === 8">已发布</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{row}">
                        <el-button size="small" type="success" @click="handleApplyAppointment(row)">申请预约</el-button>
                        <el-button size="small" type="danger" @click="deleteByid(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <div class="pagehelp">
                <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30]"
                    :small="small" :disabled="disabled" :background="background" layout="sizes, prev, pager, next"
                    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChanges" />
            </div>
    
        </div>
    
        <el-dialog v-model="dialogVisible" style="width: 1200px" title="新建病例" width="30%">
            <el-tabs v-model="activeName " class="demo-tabs">
                <el-tab-pane label="病例信息" name="case">
                    <el-form :model="FormData" :label-position="labelPosition" :label-width="labelWidth" ref="form">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="病理号" required>
                                    <el-input v-model="formData.caseNo" maxlength="20" style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="病人姓名" required>
                                    <el-input v-model="formData.name" maxlength="50" style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="年龄">
                                    <el-input type="number" v-model="formData.age" style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="性别" required>
                                    <el-select v-model="formData.sex" style="width: 220px">
                                        <el-option label="男" value="0"></el-option>
                                        <el-option label="女" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="婚姻状况">
                                    <el-select v-model="formData.maritalStatus" style="width: 220px">
                                        <el-option label="已婚" value="1"></el-option>
                                        <el-option label="未婚" value="0"></el-option>
                                        <el-option label="离异" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="民族">
                                    <el-select v-model="formData.nation" style="width: 220px">
                                        <el-option label="汉族" value="汉族"></el-option>
                                        <el-option label="满族" value="满族"></el-option>
                                        <el-option label="藏族" value="藏族"></el-option>
                                        <el-option label="回族" value="回族"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="送检时间" required>
                                    <el-date-picker v-model="formData.sendDate" type="datetime" placeholder="请选择日期" />
                                </el-form-item>
                            </el-col>
    
                            <el-col :span="8">
                                <el-form-item label="病人手机号">
                                    <el-input v-model="formData.mobile" maxlength="11" style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
    
                            <el-col :span="8">
                                <el-form-item label="取材部位" required>
                                    <el-input v-model="formData.specimen" style="width: 220px" maxlength="50"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="送检医院">
                                    <el-input v-model="formData.sendHospital" maxlength="50"
                                        style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="送诊科室">
                                    <el-input v-model="formData.sendDepart" maxlength="50" style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="送检医生">
                                    <el-input v-model="formData.sendDoctor" maxlength="50" style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
    
                            <el-col :span="8">
                                <el-form-item label="住院号">
                                    <el-input v-model="formData.inpatientNo" maxlength="50" style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="床号">
                                    <el-input v-model="formData.bedNo" maxlength="50" style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="临床资料">
                                    <el-input type="textarea" v-model="formData.clinicalRecord" rows="1" maxlength="500"
                                        style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="临床诊断" required>
                                    <el-input type="textarea" v-model="formData.clinicalDiagnosis" rows="1" maxlength="500"
                                        style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="大体所见" required>
                                    <el-input type="textarea" v-model="formData.grossDescript" rows="1" maxlength="500"
                                        style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="免疫组化" required>
                                    <el-input type="textarea" v-model="formData.ihc" rows="1" maxlength="500"
                                        style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="原病理诊断" required>
                                    <el-input type="textarea" v-model="formData.originalPathologicalDiagnosis" rows="1"
                                        maxlength="500" style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="备注">
                                    <el-input type="textarea" v-model="formData.remarks" rows="1" maxlength="500"
                                        style="width: 220px"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <span class="dialog-footer">
    
                        <el-button @click="dialogVisible = false">取消</el-button>
    
                        <el-button type="primary" @click="dialogVisible = false,addbingli()">确定</el-button>
    
                    </span>
                </el-tab-pane>
                <el-tab-pane label="上传切片" name="UploadSlice">
                    <el-upload class="upload-demo" drag action="http://localhost:9090/upload" multiple
                        :on-change="handleFileChange">
                        <el-icon class="el-icon--upload">
                            <upload-filled />
                        </el-icon>
                        <div class="el-upload__text">
                            在这里放下文件<em>或者点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                大小小于10mb的jpg/png/doc/docx文件
                            </div>
                        </template>
                    </el-upload>
                    <span class="dialog-footer">
    
                        <el-button @click="dialogVisible = false">取消</el-button>
    
                        <el-button type="primary" @click="uploadFiles">确定</el-button>
    
                    </span>
                </el-tab-pane>
                <el-tab-pane label="上传附件" name="UploadAttachment">
                    待开发
                </el-tab-pane>
                <el-tab-pane label="会诊中心" name="ConsultationCenter">
                    待开发
                </el-tab-pane>
                <el-tab-pane label="留言" name="LeaveAMessage">
                    待开发
                </el-tab-pane>
    
            </el-tabs>
            <template #footer>
    
    
            </template>
    
        </el-dialog>
    </div>
</template>

<script setup>
	import moment from 'moment';
	import { ElMessage } from 'element-plus'
	import { UploadFilled } from '@element-plus/icons-vue'
	import {
		getemrcasesizelistall,
		updateapmstatus,
		Newcase,
		GetUserName,
		GetUserId,
		deleteByID,
		upload
	} from '@/api/makeapp/emrcaseside'

	let apmstatus = ref(''); // 下拉框选中的值
	let condition = ref(''); // 输入框关键字
	const pageSize = ref(10);  //每页显示条目
	const pageNum = ref(1)  //当前页码
	const total = ref(28); // 总页数
	const background = ref(false)
	const disabled = ref(false)
	const small = ref(false)
	const tableData = ref([]); // 表格数据
	// 生成随机7位数字
	const dialogVisible = ref(false)
	const statusOptions = ref([
		{ label: '未预约', value: 0 },
		{ label: '已预约', value: 1 },
		{ label: '申请中', value: 2 },
		{ label: '撤回待确认', value: 3 },
		{ label: '撤回成功', value: 4 },
		{ label: '预约失败', value: 5 },
		{ label: '已提交', value: 6 },
		{ label: '诊断中', value: 7 },
		{ label: '已发布', value: 8 },
	]);
	const labelPosition = ref('right');
	const labelWidth = ref('120px');
	const createDate = ref('');
	const fileList = ref([]);
	const activeName = ref('case')
	const formData = reactive({
		id: '',
		caseNo: '',
		name: '',
		sex: '0',
		maritalStatus: '',
		nation: '汉族',
		sendDate: '',
		mobile: '',
		specimen: '',
		sendHospital: '湖南湘雅',
		sendDepart: '',
		sendDoctor: '',
		inpatientNo: '',
		bedNo: '',
		clinicalRecord: '',
		clinicalDiagnosis: '',
		sgrossDescriptex: '',
		ihc: '',
		originalPathologicalDiagnosis: '',
		remarks: ''
	});
	function handleFileChange(file) {
		fileList.value = file.raw;
	};

	//设置每页显示条目
	const handleSizeChange = function (val) {
		pageSize.value = val
		gettabledata()
		console.log(pageSize);
	}
	//点击分页组件页码操作
	const handleCurrentChanges = function (val) {
		pageNum.value = val;
		gettabledata()
	}

	/**
	 * 查询冰冻预约
	 */
	function gettabledata() {
		getemrcasesizelistall(pageSize.value, pageNum.value, apmstatus.value, condition.value).then(res => {
			console.log(JSON.stringify(res))
			//后端获取到的数据给tabledata
			tableData.value = res.data
			//给分页总数赋值
			total.value = tableData.value.total;
		})
	};

	//根据id删除预约
	function deleteByid(row) {
		deleteByID(row.id).then(res => {
			if (res.code == 200) {
				ElMessage({
					message: res.msg,
					type: 'success',
				})
				gettabledata()
			} else {
				ElMessage({
					message: res.msg,
					type: 'error',
				})
			}
		})
	}

	/**
	 * 新增病例
	 */
	function addbingli() {
		console.log(JSON.stringify(formData))
		formData.id = formData.caseNo;
		Newcase(formData).then(res => {
			if (res.code == 200) {
				ElMessage({
					message: res.msg,
					type: 'success',
				})
				gettabledata()
			} else {
				ElMessage({
					message: res.msg,
					type: 'error',
				})
			}
		})
	}

	/**
	 * 预约
	 * @param row
	 */
	function handleApplyAppointment(row) {
		// 点击申请预约按钮触发的事件
		updateapmstatus(row.id).then(res => {
			console.log(row.apmstatus)
			if (row.apmstatus == 2) {
				ElMessage({
					message: '已经预约过了',
					type: 'error',
				})
			} else {
				if (res.code == 200) {
					ElMessage({
						message: res.msg,
						type: 'success',
					})
					gettabledata()
				} else {
					ElMessage({
						message: res.msg,
						type: 'error',
					})
				}
			}
		})
	};

	function handleClearInput() {
		// 点击清空输入框图标触发的事件
		let condition = ref('');
	};

	function formatApmdate(date) {
		return moment(date).format('YYYY-MM-DD');
	};

	gettabledata();

</script>

<style scoped>
.page-container {
    padding: 20px;
}

.filter-container {
    display: flex;
    align-items: center;
}

.filter-container>*:not(:last-child) {
    margin-right: 20px;
}

.dialog-footer {
    width: 134px;
    height: 35px;
    float: right;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.pagehelp {
    margin: 0 auto;
    width: 500px;
}
</style>
